/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    Navigator,
    ListView,
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';
import BoyComponent from './js/page/BoyComponent';
import ListviewTest from './js/page/ListviewTest'
import setup from './js/page/setup'
import FetchTest from './js/page/FetchTest'


export default class ImoocChapterOne extends Component<Props> {
    constructor(props) {
        super(props);

        this.state = {
            selectedTab: 'Home',
        }
    }

    render() {
        return (
            <View style={styles.container}>
                {
                    /*<TabNavigator>
                     <TabNavigator.Item
                     selected={this.state.selectedTab === 'Home'}
                     title="首页"
                     selectedTitleStyle={{color: 'red'}}
                     renderIcon={() => <Image
                     style={styles.tab_image}
                     source={require('./res/images/ic_polular.png')}/>}
                     renderSelectedIcon={() => <Image style={[styles.tab_image, {tintColor: 'red'}]}
                     source={require('./res/images/ic_polular.png')}/>}
                     badgeText="1"
                     onPress={() => this.setState({selectedTab: 'Home'})}>
                     <View style={styles.page1}/>
                     </TabNavigator.Item>

                     <TabNavigator.Item
                     selected={this.state.selectedTab === 'Trend'}
                     title="热搜"
                     selectedTitleStyle={{color: 'red'}}
                     renderIcon={() => <Image style={styles.tab_image}
                     source={require('./res/images/ic_trending.png')}/>}
                     renderSelectedIcon={() => <Image style={[styles.tab_image, {tintColor: 'red'}]}
                     source={require('./res/images/ic_trending.png')}/>}
                     onPress={() => this.setState({selectedTab: 'Trend'})}>
                     <View style={styles.page2}/>
                     </TabNavigator.Item>

                     <TabNavigator.Item
                     selected={this.state.selectedTab === 'Favorite'}
                     title="收藏"
                     selectedTitleStyle={{color: 'red'}}
                     renderIcon={() => <Image
                     style={styles.tab_image}
                     source={require('./res/images/ic_favorite.png')}/>}
                     renderSelectedIcon={() => <Image style={[styles.tab_image, {tintColor: 'red'}]}
                     source={require('./res/images/ic_favorite.png')}/>}
                     onPress={() => this.setState({selectedTab: 'Favorite'})}>
                     <View style={styles.page3}/>
                     </TabNavigator.Item>

                     <TabNavigator.Item
                     selected={this.state.selectedTab === 'Mine'}
                     title="我的"
                     selectedTitleStyle={{color: 'red'}}
                     renderIcon={() => <Image style={styles.tab_image}
                     source={require('./res/images/ic_my.png')}/>}
                     renderSelectedIcon={() => <Image style={[styles.tab_image, {tintColor: 'red'}]}
                     source={require('./res/images/ic_my.png')}/>}
                     onPress={() => this.setState({selectedTab: 'Mine'})}>
                     <View style={styles.page4}/>
                     </TabNavigator.Item>
                     </TabNavigator>*/
                }
                {/*


                 <Navigator
                 initialRoute={{
                 component: BoyComponent
                 }}
                 renderScene={(route, navigator) => {
                 let Component = route.component;
                 return <Component navigator={navigator} {...route.params}/>
                 }}>
                 </Navigator> */}

                {/*<ListviewTest/>*/}
                <FetchTest/>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    page1: {
        flex: 1,
        backgroundColor: 'red',
    },
    page2: {
        flex: 1,
        backgroundColor: 'blue',
    },
    page3: {
        flex: 1,
        backgroundColor: 'yellow',
    },
    page4: {
        flex: 1,
        backgroundColor: 'green',
    },
    tab_image: {
        width: 20,
        height: 20,
    },
});

AppRegistry.registerComponent('ImoocChapterOne', () => setup);
